<extend name="Public/layout"/>
<block name="body">
    <link rel="stylesheet" href="/Kcdns/Public/Admin/plugins/TableTree/jquery.treeTable.css"/>
    <script src="/Kcdns/Public/Admin/plugins/TableTree/jquery.treeTable.js"></script>
    <style>
        section.content {
            padding-left: 0;
            margin-left: 15px;
        }

        #treeTable1 {
            border-spacing: 2px;
            border-collapse: inherit;
        }

        #treeTable1 th, #treeTable1 td {
            padding: 5px 20px 5px 20px;
        }
    </style>
    <form action="{:U('user/team')}">
        <input type="hidden" name="user__CFG__uid" value="{:I('get.user.uid')}"/>
        <div class="form-group">
            <div class="input-group date" style="width:100px;float: left;">
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input type="hidden" name="start_time" class="text date"
                       value="{:I('get.start_time')}"/>
                <input style="width: auto;" type="text" data-name="start_time"
                       class="form-control date datepicker" value="{:I('get.start_time')}"
                       placeholder="请选择开始日期"
                       data-type="date"/>
            </div>
            <div class="input-group date" style="width:100px;float: left;">
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input type="hidden" name="end_time" class="text date"
                       value="{:I('get.end_time')}"/>
                <input style="width: auto;" type="text" data-name="end_time"
                       class="form-control date datepicker" value="{:I('get.end_time')}"
                       placeholder="请选择结束日期"
                       data-type="date"/>
            </div>
            <button class="btn btn-flat _dt_btns_ btn-default">搜索</button>
        </div>
    </form>
    <table id="treeTable1"></table>
    <script>
        $(function () {
            $('.form-control.date.datepicker').change(function () {
                $(this).prev().val($(this).val());
            });

            $('.form-group').find('.datepicker').each(function () {
                var $this = $(this);
                var dateType = $(this).attr('data-type');
                var handle = "datepicker";
                var format = "yyyy-mm-dd";
                var options = {
                    language: 'zh-CN',
                    autoclose: true,
                    templates: {
                        leftArrow: '<i class="fa fa-caret-square-o-left"></i>',
                        rightArrow: '<i class="fa fa-long-arrow-right"></i>'
                    },
                }
                switch (dateType) {
                    case 'timestamp':
                    case 'datetime':
                        format = "yyyy-mm-dd hh:ii";
                        handle = 'datetimepicker';
                        break;
                    case 'date':
                        format = "yyyy-mm-dd";
                        handle = 'datepicker';
                        break;
                }
                options.format = format;
                var fieldName = $this.attr('data-name');
                $this[handle](options)
                    .on('changeDate,change', function (e) {
                        var value = $(e.currentTarget).val();
                        $('input[name=' + fieldName + ']').val(value);
                    });
            });

            var data = {$list};
            var title = data.title;
            var option = {
                expandLevel: 2,
                data: data,
                title: title,
                beforeExpand: function ($treeTable, id) {
                    if ($('.' + id, $treeTable).length) {
                        return;
                    }

                    $.ajax({
                        url: '{:U("user/getDirectList")}',
                        type: 'post',
                        data: {
                            uid: id,
                            level: $.trim($('#' + id).find('td:eq(2)').text()),
                            start_time: $('[name="start_time"]').val(),
                            end_time: $('[name="end_time"]').val()
                        },
                        dataType: 'json',
                        success: function (result) {
                            $treeTable.addChilds($treeTable.build(result.data));
                        }
                    });
                }
            };
            $('#treeTable1').treeTable(option);
            $('#treeTable1').parent(".content").css({height: ($(window).height() - 150), "overflow-x": "auto"})
        });
    </script>
</block>